---
title: Bilder
description: Lerne, wie du Bilder in Astro verwenden kannst.
i18nReady: true
---
import Since from '~/components/Since.astro';


Astro bietet dir verschiedene Möglichkeiten, Bilder auf deiner Website zu verwenden, ganz gleich, ob sie lokal in deinem Projekt gespeichert sind, auf anderen Quellen verlinkt werden oder in einem CMS oder CDN gespeichert sind!

:::note[Assets verwenden (Experimentell)]
Die experimentelle Asset-Unterstützung wurde in `astro@2.1.0` hinzugefügt. Wenn du die Unterstützung für Assets aktiviert hast, findest du weitere Informationen in der [Asset-Anleitung (Experimentell)](/de/guides/images/).

**Einige der folgenden Ratschläge sind nicht mit der experimentellen Flag kompatibel.**
:::

### In `.astro`-Dateien

Astro verwendet HTML `<img>`-Elemente, um Bilder anzuzeigen, und alle HTML-Bildattribute werden unterstützt.

Das Attribut `src` ist erforderlich und sein Format hängt davon ab, wo deine Bilder gespeichert sind und ob du die experimentelle Unterstützung für Assets aktiviert hast:

```astro title="src/pages/index.astro"
---
import rocket from '../images/rocket.svg';
---
<!-- Remote-Bild auf einem anderen Server -->
<img src="https://astro.build/assets/logo.png" width="25" alt="Astro">

<!-- Lokales Bild gespeichert unter public/assets/stars.png -->
<img src="/assets/stars.png" alt="Ein sternenklarer Nachthimmel.">

<!-- Lokales Bild gespeichert unter src/images/rocket.svg -->
<img src={Rakete} alt="Eine Rakete im Weltraum."/>
```

### In Markdown-Dateien

Du kannst die Standard Markdown `![]()` Syntax oder die Standard HTML `<img>`-Tags in deinen `.md`-Dateien für Bilder verwenden, die sich in deinem `public/`-Ordner befinden, oder für Remote-Bilder auf einem anderen Server.

Wenn du deine Bilder nicht in `public/` speichern kannst, empfehlen wir, die [experimentelle Unterstützung für Assets](/de/guides/images/) zu aktivieren oder das Dateiformat `.mdx` zu verwenden, mit dem du importierte Komponenten mit einer Markdown-ähnlichen Syntax kombinieren kannst. Verwende die [MDX-Integration](/de/guides/integrations-guide/mdx/), um Astro-Unterstützung für MDX hinzuzufügen.

```md
<!-- src/pages/post-1.md -->

# Meine Markdown-Seite

<!-- Lokales Bild gespeichert unter public/assets/stars.png -->
![Ein sternenklarer Nachthimmel.](/assets/stars.png)
<img src="/assets/stars.png" alt="Ein sternenklarer Nachthimmel.">

<!-- Remote-Bild auf einem anderen Server -->
![Astro](https://astro.build/assets/logo.png)
<img src="https://astro.build/assets/logo.png" width="25" alt="Astro">
```

### In MDX-Dateien

Du kannst die Standard-Markdown-Syntax `![]()` oder JSX `<img />`-Tags in deinen `.mdx`-Dateien verwenden, um Bilder aus deinem `public/`-Ordner oder von Remot-Servern anzuzeigen.

Außerdem kannst du Bilder importieren und verwenden, die sich im Verzeichnis `src/` deines Projekts befinden, wie bei Astro-Komponenten.

```mdx title="src/pages/post-1.mdx"

import rocket from '../images/rocket.svg';

# Meine MDX-Seite

// Lokales Bild gespeichert unter src/images/rocket.svg
<img src={Rakete} alt="Eine Rakete im Weltraum."/>

// Lokales Bild gespeichert unter public/assets/stars.png
![Ein sternenklarer Nachthimmel.](/assets/stars.png)
<img src="/assets/stars.png" alt="Ein sternenklarer Nachthimmel." />

// Remote-Bild auf einem anderen Server
![Astro](https://astro.build/assets/logo.png)
<img src="https://astro.build/assets/logo.png" width="25" alt="Astro" />
```

### In UI-Framework-Komponenten

Wenn du Bilder in einer [UI-Framework-Komponente](/de/core-concepts/framework-components/) (z. B. React, Svelte) hinzufügst, verwende die Bildersyntax, die für das jeweilige Framework der Komponente geeignet ist.

## Wo die Bilder gespeichert werden

### `src/`

Deine in `src/` gespeicherten Bilder können von Komponenten (`.astro`, `.mdx` und anderen UI-Frameworks) verwendet werden, aber nicht in Markdown-Dateien.

Wir empfehlen, dass du deine Bilder in [`public/`](#public) aufbewahrst oder sie [remote](#bilder-von-einem-cms-oder-cdn-verwenden) speicherst, wenn du Markdown-Dateien verwenden musst.

Importiere sie aus einem **relativen Dateipfad** oder [import alias](/de/guides/aliases/) in eine beliebige Komponentendatei und verwende dann den Import als `src`-Attribut des Bildes.


```astro
---
// src/pages/index.astro

// Zugriff auf Bilder in `src/images/`
import logo from '../images/logo.png';
---
<img src={logo} width="40" alt="Astro" />
```

### `public/`

Deine in `public/` gespeicherten Bilder können von Komponenten (`.astro`, `.mdx` und anderen UI-Frameworks) und auch von Markdown-Dateien verwendet werden.


Die Dateien im Verzeichnis `/public` werden jedoch immer ohne Bearbeitung bereitgestellt oder kopiert. Wenn du Bilder außerhalb von Markdown-Dateien verwendest, empfehlen wir, dass du lokale Bilder möglichst in `src/` aufbewahrst, damit Astro sie umwandeln, optimieren und bündeln kann.

Das Attribut `src` ist **relativ zum öffentlichen Ordner**. In Markdown kannst du auch die `![]()`-Notation verwenden.

```astro title="src/pages/index.astro"
---
// Zugriff auf Bilder in `public/images/`
---
<img src="/images/logo.png" />
```

### `src/assets/` (experimentell)

In der Anleitung [Assets (Experimentell)](/de/guides/images/) kannst du nachlesen, wie du den Ordner `/assets/` experimentell nutzen kannst.

Dazu musst du deine bestehenden Bilder aktualisieren, die aktuelle Astro-Bildintegration entfernen und zusätzliche manuelle Änderungen vornehmen, um einige der neuen Funktionen zu nutzen.

## Astro's Bild-Integration

Die offizielle Bild-Integration von Astro bietet zwei verschiedene Astro-Komponenten für die Darstellung optimierter Bilder, `<Image />` und `<Picture />`. Sie wird für alle statischen Seiten und für [einige Server-seitige Rendering-Implementierungshosts](/de/guides/integrations-guide/image/#installation) unterstützt.

Nach der [Installation von `@astrojs/image`](/de/guides/integrations-guide/image/#installation) kannst du diese beiden Komponenten überall dort verwenden, wo du Astro-Komponenten verwenden kannst: in `.astro`- und `.mdx`-Dateien.

:::note[Inkompatibel mit Assets]
Wenn du die experimentelle Asset-Unterstützung aktiviert hast, musst du die offizielle Integration deinstallieren. Weitere Informationen findest du im [Assets (Experimental) Guide](/de/guides/images/).
:::

### `<Image />`

Mit der Komponente [`<Image />`](/de/guides/integrations-guide/image/#image-) von Astro kannst du ein einzelnes Bild optimieren und Breite, Höhe und/oder Seitenverhältnis festlegen. Du kannst dein Bild sogar in ein bestimmtes Ausgabeformat umwandeln.

Diese Komponente ist nützlich für Bilder, bei denen du eine einheitliche Größe auf verschiedenen Bildschirmen beibehalten oder die Qualität eines Bildes genau kontrollieren willst (z. B. Logos).

Für responsive Bilder oder Art Direction verwendest du stattdessen die Komponente `<Picture />`.

#### Remote-Bilder

(erforderliche Attribute: [`src`](/de/guides/integrations-guide/image/#src), [`alt`](/de/guides/integrations-guide/image/#alt), [`format`](/de/guides/integrations-guide/image/#format), und Abmessungen)

Übergib dem Attribut `src` der Komponente `<Image />` eine vollständige URL und gib einen Wert für `alt` an.

Die Komponente `<Image />` kann das ursprüngliche Dateiformat eines Remote-Bildes nicht bestimmen, daher musst du ein Ausgabeformat (z. B. png, avif) angeben, um dein Remote-Bild umzuwandeln.

Du musst außerdem entweder [`width`](/de/guides/integrations-guide/image/#width) und [`height`](/de/guides/integrations-guide/image/#height) oder eine der Dimensionen plus ein [`aspectRatio`](/de/guides/integrations-guide/image/#aspectratio) angeben, um zu vermeiden, dass sich das Layout des Inhalts verschiebt, weil die `<Image />`-Komponente die Dimensionen eines Remote-Bildes nicht kennt.

[Alle anderen Eigenschaften](/de/guides/integrations-guide/image/#image-) sind optional.

#### Lokale Bilder in `src/`

(erforderliche Attribute: [`src`](/de/guides/integrations-guide/image/#src), und [`alt`](/de/guides/integrations-guide/image/#alt))

Importiere dein Bild in Frontmatter und übergib es direkt an das Attribut `src` der Komponente `<Image />`.

`alt` ist erforderlich, aber [alle anderen Eigenschaften](/de/guides/integrations-guide/image/#image-) sind optional und werden auf die ursprünglichen Eigenschaften der Bilddatei zurückgesetzt, wenn sie nicht angegeben werden.

#### Bilder in `public/`

(erforderliche Attribute: [`src`](/de/guides/integrations-guide/image/#src), [`alt`](/de/guides/integrations-guide/image/#alt), [`format`](/de/guides/integrations-guide/image/#format), und Abmessungen)

Übergib dem Attribut `src` der Komponente einen Pfad relativ zum öffentlichen Ordner und gib einen Wert für `alt` an.

Es wird wie ein Remote-Bild behandelt, für das entweder die beiden Attribute [`width`](/de/guides/integrations-guide/image/#width) und [`height`](/de/guides/integrations-guide/image/#height) oder eine Dimension und ein [`aspectRatio`](/de/guides/integrations-guide/image/#aspectratio) erforderlich sind.

Ein Wert für das Attribut `Format` (z.B. png, avif) zur Umwandlung deines Bildes ist erforderlich.

[Alle anderen Eigenschaften](/de/guides/integrations-guide/image/#image-) sind optional.

Dein Originalbild wird unbearbeitet in den Build-Ordner kopiert, wie alle Dateien, die sich in `public/` befinden, und Astros Bildintegration liefert auch optimierte Versionen des Bildes.

#### Beispiele

```astro
---
// src/pages/index.astro
import { Image } from '@astrojs/image/components';
import localImage from "../assets/logo.png";
const remoteImage = "https://picsum.photos/id/957/300/200.jpg";
const localAlt = "Das Astro-Logo";
const remoteAlt = "Ein niedriger Blickwinkel auf einen Wald während des Tages";
---

<!--optimiertes lokales Bild unter Beibehaltung der ursprünglichen Breite, Höhe und des Bildformats-->
<Image src={localImage} alt={localAlt} />

<!-- Die Höhe wird neu berechnet, um dem ursprünglichen Seitenverhältnis zu entsprechen-->
<Image src={localImage} width={300} alt={localAlt} />

<!--Für Remote-Bilder sind die gewünschten Abmessungen und das Format erforderlich-->
<Image src={remoteImage} width={300} aspectRatio="1:1" format="png" alt={remoteAlt} />

<!-- Zuschneiden auf eine bestimmte Breite und Höhe -->
<Image src={localImage} width={300} height={600} alt={localAlt}/>
<Image src={remoteImage} width={544} height={184} format="png" alt={remoteAlt}/>

<!-- Zuschneiden auf ein bestimmtes Seitenverhältnis und Konvertieren in ein avif-Format-->
<Image src={localImage} aspectRatio="16:9" format="avif" alt={localAlt}/>
<Image src={remoteImage} height={200} aspectRatio="16:9" format="avif" alt={remoteAlt}/>

<!-- lokale Bildimporte können auch direkt eingefügt werden-->
<Image src={import('../assets/logo.png')} alt={localAlt}/>

<!-- Wenn ein Bild im Ordner `/public` gespeichert ist, verwende seinen Pfad relativ zu `/public`-->
<Image src="/penguin.jpg" width="300" aspectRatio={1} format="png" alt="Ein glücklicher Pinguin"/>
```

### `<Picture /> `

Mit der [`<Picture />`-Komponente](/de/guides/integrations-guide/image/#picture-) von Astro kannst du responsive Bilder auf deiner Website bereitstellen, einschließlich verschiedener Bildgrößen, Formate und Layouts.

Du kannst den Browser des Nutzers geeignete Bildgrößen, Auflösungen und Dateitypen auf der Grundlage von Faktoren wie Bildschirmgröße und Bandbreite auswählen lassen. Oder du kannst Regeln festlegen, die der Browser auf der Grundlage von Media-Queries befolgen muss.

Diese Komponente ist nützlich, um zu optimieren, was dein Nutzer auf verschiedenen Bildschirmgrößen sieht, oder für die künstlerische Gestaltung.

:::tip
Im MDN-Leitfaden findest du weitere Informationen über [responsive Bilder und Art Direction](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#art_direction).
:::

#### Remote-Bilder

(erforderliche Attribute: [`src`](/de/guides/integrations-guide/image/#src-1), [`widths`](/de/guides/integrations-guide/image/#widths), [`sizes`](/de/guides/integrations-guide/image/#sizes), [`alt`](/de/guides/integrations-guide/image/#alt-1), und [`aspectRatio`](/de/guides/integrations-guide/image/#aspectratio-1))

Übergib eine vollständige URL an das Attribut `<Picture />` der Komponente `src`.

Ein Wert für `aspectRatio` wird auch benötigt, um sicherzustellen, dass die korrekte Höhe für Remote-Bilder zur Erstellungszeit berechnet werden kann.

Du musst der Komponente mindestens die Werte für Bildbreiten und Bildschirmgrößen geben, aber [alle anderen Eigenschaften](/de/guides/integrations-guide/image/#picture-) sind optional.

Obwohl [`formats`](/de/guides/integrations-guide/image/#formats) nicht erforderlich ist, ist das ursprüngliche Bildformat von Remote-Bildern unbekannt und wird standardmäßig nicht berücksichtigt. Wenn es nicht angegeben wird, werden nur `webp` und `avif` einbezogen.

#### Lokale Bilder

(erforderliche Attribute: [`src`](/de/guides/integrations-guide/image/#src-1), [`widths`](/de/guides/integrations-guide/image/#widths), [`sizes`](/de/guides/integrations-guide/image/#sizes), [`alt`](/de/guides/integrations-guide/image/#alt-1))

Importiere dein Bild in Frontmatter und übergib es direkt an das Attribut `<src>` der Komponente `<Picture />`.

Du musst der Komponente mindestens die Werte für Bildbreiten und Bildschirmgrößen geben, aber [alle anderen Eigenschaften](/de/guides/integrations-guide/image/#picture-) sind optional.

Standardmäßig enthalten die [`formats`](/de/guides/integrations-guide/image/#formats) der Komponente `<Picture />` zusätzlich zum Originalformat des Bildes die Formate `avif` und `webp`, wenn sie nicht angegeben sind.

#### Bilder in `public/`

(erforderliche Attribute: [`src`](/de/guides/integrations-guide/image/#src-1), [`widths`](/de/guides/integrations-guide/image/#widths), [`sizes`](/de/guides/integrations-guide/image/#sizes), [`alt`](/de/guides/integrations-guide/image/#alt-1), und [`aspectRatio`](/de/guides/integrations-guide/image/#aspectratio-1))

Übergib dem Attribut `src` der Komponente einen Pfad relativ zum öffentlichen Ordner und gib einen Wert für `alt` an.

Das Bild wird als Remote-Bild behandelt, daher ist auch ein Wert für `aspectRatio` erforderlich, damit die korrekte Höhe zum Zeitpunkt der Erstellung berechnet werden kann.

Du musst der Komponente mindestens die Werte für Bildbreiten und Bildschirmgrößen geben, aber [alle anderen Eigenschaften](/de/guides/integrations-guide/image/#picture-) sind optional.

Obwohl [`formats`](/de/guides/integrations-guide/image/#formats) nicht erforderlich ist, ist das ursprüngliche Bildformat der Bilder im Ordner `public/` nicht bekannt und wird standardmäßig nicht einbezogen. Wenn keine Angabe gemacht wird, werden nur `webp` und `avif` einbezogen.

Dein Originalbild wird unbearbeitet in den Build-Ordner kopiert, wie alle Dateien, die sich in `public/` befinden, und Astros Bildintegration liefert auch optimierte Versionen des Bildes.

#### Beispiele

```astro
---
import { Picture } from '@astrojs/image/components';
import localImage from '../assets/logo.png';
const remoteImage = 'https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png';
---

<!--Lokales Bild mit mehreren Größen und Formaten-->
<Picture src={localImage} widths={[200, 400, 800]} sizes="(max-width: 800px) 100vw, 800px" formats={['avif', 'jpeg', 'png', 'webp']} alt="Das Astro-Logo" />

<!--Remote-Bild (Seitenverhältnis ist erforderlich)-->
<Picture src={remoteImage} widths={[200, 400, 800]} aspectRatio="4:3" sizes="(max-width: 800px) 100vw, 800px" alt="Das Google-Logo" />

<!--Bilder in /public funktionieren wie Remote-Bilder-->
<Picture src="/logo.png" widths={[200, 400, 800]} aspectRatio="4:3" sizes="(max-width: 800px) 100vw, 800px" alt="Das Google-Logo" />

<!-Inline-Importe werden unterstützt-->
<Picture src={import("../assets/logo.png")} widths={[200, 400, 800]} sizes="(max-width: 800px) 100vw, 800px" alt="Das Astro-Logo" />

```


### Verwendung in MDX

In `.mdx` Dateien können `<Image />` und `<Picture />` dein Bild `src` durch Importe und Exporte erhalten.

```mdx
// src/pages/index.mdx

import { Image, Picture } from '@astrojs/image/components';
import rocket from '../assets/rocket.png';
export const galaxy = 'https://astro.build/assets/galaxy.jpg';

<Image src={import('../assets/logo.png')} alt="Astro"/>
<Image src={rocket} width={300} alt="Raumschiff im Anflug auf den Mond."/>
<Picture src={rocket} widths={[200, 400, 800]} sizes="(max-width: 800px) 100vw, 800px" alt="Eine Rakete explodiert." />
<Picture src={galaxy} widths={[200, 400, 800]} aspectRatio={16/9} sizes="(max-width: 800px) 100vw, 800px" alt="Der Weltraum." />
```

### Einstellung der Standardwerte

Zurzeit gibt es keine Möglichkeit, Standardwerte für alle `<Image />`- und `<Picture />`-Komponenten festzulegen. Erforderliche Attribute sollten für jede einzelne Komponente festgelegt werden.

Alternativ kannst du diese Komponenten zur Wiederverwendung in eine andere Astro-Komponente verpacken. Du könntest zum Beispiel eine Komponente für deine Blogpost-Bilder erstellen:

```astro title="src/components/BlogPostImage.astro"
---
import { Picture } from '@astrojs/image/components';

const {src, ...attrs} = Astro.props;
---
<Picture src={src} widths={[400, 800, 1500]} sizes="(max-width: 767px) 100vw, 736px" {...attrs} />

<style>
  img, picture :global(img), svg {
    margin-block: 2.5rem;
    border-radius: 0.75rem;
  }
</style>
```

### Verwendung von `<img>` mit der Bildintegration

Mit der offiziellen Bildintegration wird der Bildimport so geändert, dass er ein Objekt und nicht mehr eine Quell-Zeichenkette zurückgibt.
Das Objekt hat die folgenden Eigenschaften, die aus der importierten Datei stammen:
```ts
{
  src: string;
  width: number;
  height: number;
  format: 'avif' | 'gif' | 'heic' | 'heif' | 'jpeg' | 'jpg' | 'png' | 'tiff' | 'webp';
}
```

Wenn du die Bildintegration installiert hast, verweise auf die Eigenschaft `src` des Objekts, wenn du `<img>` verwendest.

```astro ".src"
---
import rocket from '../images/rocket.svg';
---
<img src={rocket.src} alt="Ein Rakete im Weltraum."/>
```

Alternativ kannst du auch `?url` zu deinen Importen hinzufügen, damit sie eine Quell-Zeichenkette zurückgeben.

```astro "?url"
---
import rocket from '../images/rocket.svg?url';
---
<img src={rocket} alt="Ein Rakete im Weltraum."/>
```

## Bilder von einem CMS oder CDN verwenden

Bild-CDNs funktionieren problemlos mit Astro. Verwende die vollständige URL eines Bildes als `src`-Attribut in einem `<img>`-Tag oder in der Markdown-Schreibweise.

Wenn das CDN ein Node.js-SDK bereitstellt, kannst du dieses in deinem Projekt verwenden. Das SDK von [Cloudinary](https://cloudinary.com/documentation/node_integration) kann zum Beispiel den Tag `<img>` mit dem entsprechenden `src` für dich erzeugen.

Um [externe Bilder mit den Komponenten `<Image />`](#remote-bilder) und [`<Picture />`](#remote-bilder-1) von Astros Bildintegration zu verwenden, musst du die entsprechenden Dimensions- und Formatwerte für die Arbeit mit Remote-Bildern angeben.

## Alt Text

Nicht alle Nutzerinnen und Nutzer können Bilder auf die gleiche Weise sehen, daher ist Barrierefreiheit bei der Verwendung von Bildern besonders wichtig. Verwende das Attribut `alt`, um einen [beschreibenden Alt-Text](https://www.w3.org/WAI/tutorials/images/) für Bilder anzugeben.

Dieses Attribut ist für die Komponenten `<Image />` und `<Picture />` der Bildintegration erforderlich. Diese Komponenten geben einen Fehler aus, wenn kein Alt-Text angegeben wird.

Wenn das Bild nur dekorativ ist (d.h. nicht zum Verständnis der Seite beiträgt), setze `alt=""`, damit Screenreader wissen, dass sie das Bild ignorieren sollen.



## Community-Integrationen

Neben der offiziellen [`@astrojs/image`](/de/guides/integrations-guide/image/) Integration gibt es mehrere [Community Bild-Integrationen](https://astro.build/integrations?search=images) von Drittanbietern, um Bilder in deinem Astro-Projekt zu optimieren und mit ihnen zu arbeiten.
